import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Layout, Menu, Breadcrumb } from 'antd';
import routeConfig from '@@/route/config';

import './Home.less';

import PAGE404 from '@@/views/PAGE404';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

/**
 * 递归构建菜单列表
 * @param menus 配置数组
 * @returns 菜单元素列表
 */
const buildMenus = (menus: IRoutesConfig[]): JSX.Element[] => {
  let ret: JSX.Element[] = [];
  menus.forEach(menu => {
    if (menu.routes && menu.routes.length > 0) {
      ret.push(
        <SubMenu key={menu.path} title={menu.title}>
          {
            (() => {
              return buildMenus(menu.routes ? menu.routes : [])
            })()
          }
        </SubMenu>
      )
    } else {
      ret.push(<Menu.Item key={menu.path} icon={menu.icon}>{ menu.title || '' }</Menu.Item>)
    }
  })
  return ret;
}

/**
 * 构建路由列表
 * @param routes 路由配置
 * @returns Route 列表
 */
const buildRoutes = (routes: IRoutesConfig[]): JSX.Element[] => {
  let ret: JSX.Element[] = [];
  routes.forEach(route => {
    if (route.routes && route.routes.length > 0) {
      const val = buildRoutes(route.routes);
      ret = ret.concat(val);
    } else {
      ret.push(<Route {...route} key={route.path} />)
    }
  })
  return ret;
}

/**
 * 构建面包屑
 */
const buildBreadcrumbs = (props: any, routeConfig: any[]): JSX.Element[] => {
  let ret:JSX.Element[] = [];
  routeConfig.forEach((route: any) => {
    if (route.routes && route.routes.length > 0) {
      const val = buildBreadcrumbs(props, route.routes);
      ret = ret.concat(val);
    } else {
      if (route.title && route.path === props.location.pathname) {
        ret.push(<Breadcrumb.Item key={route.path}>{ route.title }</Breadcrumb.Item>);
      }
    }
  })
  return ret;
}

const Home: React.FC = (props: any) => {
  const [ collapsed , setCollapsed ] = useState(false);

  /* --======================副作用======================-- */
  // 空地址访问时的默认页面
  useEffect(() => {
    if (props.location.pathname === '/manage') {
      props.history.push(props.routes[0].path); // 会议室管理
    }
  })

  /* --======================事件处理======================-- */
  // 处理侧边栏折叠事件
  const handleSiderCollapse = () => {
    setCollapsed(!collapsed);
  }

  // 菜单条目点击处理
  const handleMenuItemClick = (e: any) => {
    props.history.push(e.key);
  }

  return (
    <Layout id="compoents-layout-demo-side" style={{ minHeight: '100vh' }} >
      <Sider collapsible collapsed={collapsed} onCollapse={handleSiderCollapse}>
        <div className="logo">
          德会项目办公--管理系统
        </div>
        <Menu theme="dark" defaultSelectedKeys={props.location.pathname} mode="inline" onClick={handleMenuItemClick}>
          { (() => buildMenus(props.routes))() }
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            { (() => buildBreadcrumbs(props, routeConfig))() }
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <Switch>
              { (() => buildRoutes(props.routes))() }
              <Route component={PAGE404}/>
            </Switch>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design @2018 Created by Ant
        </Footer>
      </Layout>
    </Layout>
  )
}

export default Home;
